<template>

  <div>
    <!--drag 拖曳上传，去掉就是正常的上传-->
    <el-upload
      action="#"
      :accept="upload.accept"
      :auto-upload="upload.autoUpload"
      :on-change="imageChange"
      multiple
      drag
      :on-remove="onRemove"
      :on-exceed="handleExceed"
      :limit="upload.limit"
      :show-file-list="upload.showFileList"
      :list-type="upload.pictureCard"
      :class="{hide: upload.hideUploadAdd}"
      :file-list="upload.fileList">

      <!--上传按钮-->

      <!--拖曳上传的提示文字-->
      <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
      <!--普通上传-->
      <i class="el-icon-plus"></i>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg/gif文件</div>
    </el-upload>
  </div>

</template>

<script>
  export default {
    // 传统单图片上传,支持图片的拖曳上传
    name: "SinglePictureUploadScreenshot",
    // 父子组件传值
    props:{

    },
    data(){
      return {
        // 上传配置
        upload: {
          // 上传的文件
          fileList: [],
          // 关闭自动上传
          autoUpload: false,
          // 是否显示上传文件列表
          showFileList: true,
          // 限制的图片类型
          accept: ".jpg,.jpeg,.png,.gif",
          // 照片picture-card展示的方式
          pictureCard: 'picture-card',
          // 最多一次上传1张图片，这里实际没啥用，用来做后续扩展的
          limit: 1,
          // 是否隐藏添加框，当添加数量达到后隐藏继续添加的按钮
          hideUploadAdd: false,
        },
      }
    },
    methods: {
      /**
       * 每次选择文件都会触发函数，可以用来前端删除和添加照片
       */
      imageChange(file, fileList){
        const isLt20M = file.size / 1024 / 1024 < 20;
        if (!isLt20M) {
          this.$message.error("上传图片大小不能超过 20MB!");
          fileList.splice(-1, 1);
        } else {
          this.upload.fileList = fileList;
        }
        // 上传文件>=限制个数时隐藏上传组件
        if (fileList.length >= this.upload.limit) {
          this.upload.hideUploadAdd = true
        }
      },
      /**
       * 文件添加超过限制进行过滤
       * @param files
       * @param fileList
       */
      handleExceed(files, fileList) {
        this.$message.warning(`不能继续添加图片文件`);
      },
      /**
       * 删除文件的方法
       */
      onRemove(file, fileList){
        // console.log("file", file)
        // console.log("fileList", fileList)
        // 上传文件>=限制个数时隐藏上传组件
        if (fileList.length >= this.upload.limit) {
          this.upload.hideUploadAdd = true;
        } else {
          this.upload.hideUploadAdd = false;
        }
      },
    },
    mounted(){

    }
  }
</script>


<style scoped>


</style>

<style >

  /*隐藏掉新的添加框，注意，要将style上传 scoped 去掉*/
  .hide .el-upload--picture-card {
    display: none;
  }

  /*拖曳上传的样式，比之前的框小很多*/
  .el-upload .el-upload-dragger {
    width: 250px;
    height: 150px;
  }
  .el-upload .el-upload-dragger .el-icon-upload {
    margin: 20px 0 16px;
  }

</style>
